<template>
  <div id="container">
    <div id="panel"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import AMap from 'vue-amap';
export default {
  name: "map-view",
  mounted() {
    this.initAMap();
     var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });
    //构造路线导航类
    var driving = new AMap.Driving({
        map: map,
        panel: "panel"
    }); 
    // 根据起终点名称规划驾车导航路线
    driving.search([
        {keyword: '北京市地震局(公交站)',city:'北京'},
        {keyword: '亦庄文化园(地铁站)',city:'北京'}
    ], function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
            log.success('绘制驾车路线完成')
        } else {
            log.error('获取驾车数据失败：' + result)
        }
    });
  },
  unmounted() {
    this.map?.destroy();
  },
  
  methods: {
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "921736dff132c9df8c2ec3e30a1a8394",
      };
      AMapLoader.load({
        key: "d4dfbabbc5fd2e2bf76f63c4da043496", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
            
       

          });
           map.addControl(new AMap.Scale())
         map.addControl(new AMap.ToolBar())
         emit("onload", map)
        })
        .catch((e) => {
          console.log(e);

        });
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 800px;
}
  #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
        #panel .amap-call {
            background-color: #009cf9;
            border-top-left-radius: 4px;
   	        border-top-right-radius: 4px;
        }
        #panel .amap-lib-driving {
	        border-bottom-left-radius: 4px;
   	        border-bottom-right-radius: 4px;
            overflow: hidden;
        }
</style>
